<template>
  <div class="detail">
    <!--账单明细-->
    <v-title>{{ $t('message.billDetail') }}</v-title>
    <!--商品信息-->
    <div class="product">
      <div class="product-header">
        <ul>
          <!--商品信息-->
          <li class="info">{{ $t('message.goodsInfo') }}</li>
          <!--订单总额-->
          <li class="amount">{{ $t('message.orderSum') }}</li>
          <!--分期数-->
          <li class="number">{{ $t('message.stagingNumber') }}</li>
          <!--每期应付-->
          <li class="pay">{{ $t('message.everyPeriodNeedPay') }}</li>
        </ul>
      </div>
      <div class="product-content">
        <ul>
          <!--商品图片-->
          <li class="img" :class="{ 'width-341': giftsExist }">
            <!--商品图片-->
            <div class="item">
              <img :src="product.icon1"/>
            </div>
            <!--赠品图片-->
            <div class="item" :class="{ 'padding-left-18': giftsExist }" v-if="giftsExist">
              <img :src="gifts[0].icon1"/>
            </div>
            <div class="item" :class="{ 'width-padding-left': giftsExist }" v-if="giftsExist">
              {{$t('message.nProductsInTotal1')}}{{numInTotal}}{{$t('message.nProductsInTotal2')}}
            </div>
          </li>
          <!--商品标题-->
          <li class="title" v-if="!giftsExist">
            <div class="item">
              <p>{{ product.name }} {{ product.sub_name }}</p>
            </div>
          </li>
          <li class="amount">
            <div class="item gray">
              {{ $t('message.currencySymbol') }}{{ product.total_price }}
            </div>
          </li>
          <li class="number">
            <div class="item gray">
              {{ $t('message.divide') }}{{ product.stages }}{{ $t('message.time') }}
            </div>
          </li>
          <li class="pay">
            <div class="item gray">
              {{ $t('message.currencySymbol') }}{{ product.per_stages_amount }}
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!--详细分期信息-->
    <div class="installment">
      <div class="installment-header">
        <ul>
          <!--分期数-->
          <li class="installment-number">{{$t('message.PersonalBillRepayStagingNumber')}}</li>
          <!--最后还款日期-->
          <li class="date">{{$t('message.lastReturnDay')}}</li>
          <!--每期应付-->
          <li class="installment-pay">{{$t('message.everyPeriodNeedPay')}}</li>
          <!--还款状态-->
          <li class="status">{{$t('message.periodStatus')}}</li>
        </ul>
      </div>
      <div class="loading" v-if="status === 'loading'">
        <v-loading></v-loading>
      </div>
      <div class="installment-content" v-if="status === 'complete'">
        <div class="installment-item" v-for="(item, index) in installment">
          <ul :class="{ 'has-paid': item.is_paid }">
            <li class="installment-number">
              <div class="item-table-cell">
              	{{ item.id }}/{{ item.stages }}{{ $t('message.time') }}
              </div>
            </li>
            <li class="date">
              <div class="item-table-cell">
                {{ item.last_pay_date }}
              </div>
            </li>
            <li class="installment-pay">
              <div class="item-table-cell">
              	<div class="item-pay">
                  {{ item.amount }}
                </div>
                <template v-if="item.is_paid === 0 && item.with_time > 0 && item.late_fee !== '0.00'">
                  <div class="item-overdue overdue">
                    +{{ item.late_fee }}
                  </div>
                  <div class="item-icon">
                    <div class="item-icon-img" @mouseenter="showTip(index)" @mouseleave="hideTip(index)">
                      <img src="../../../assets/images/personal/icon_question_tip.png"/>
                    </div>
                    <div class="tip" v-if="isShowTip === index">
                      <div class="tip-angle"></div>
                      {{$t('message.PersonalBillRepayTimeFee')}}：{{ $t('message.currencySymbol') }}{{ item.late_fee }}
                    </div>
                  </div>
                </template>
                <template v-if="item.is_paid === 1 && item.with_time > 0">
                  <div class="item-overdue">
                    (+{{ item.late_fee }} {{$t('message.PersonalBillRepayTimeFee')}})
                  </div>
                </template>
              </div>
            </li>
            <li class="installment-status" :class="{ overdue: item.is_paid === 0 && item.with_time > 0 }">
              <div class="item-table-cell">
                <div>
                	{{ item.is_paid ? $t('message.hasPay2') : $t('message.hasNoPay') }}
                </div>
              	<div>
              		<span v-if="item.with_time > 0">({{$t('message.overTime')}}{{ item.with_time }}{{$t('message.day')}})</span>
              	</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VTitle from '@/components/base/VTitle'
import VLoading from '@/components/base/VLoading'

export default {
  name: 'PersonalBillDetail',
  components: {
    VTitle,
    VLoading
  },
  data () {
    return {
      isShowTip: null,
      product: {},
      installment: {},
      status: 'loading',
      gifts: [], // 赠品列表
      numInTotal: 0, // 总商品件数
      giftsExist: false // 是否有赠品
    }
  },
  methods: {
    showTip (index) {
      this.isShowTip = index
    },
    hideTip (index) {
      this.isShowTip = null
    },
    getBillDetail () {
      let orderId = this.$route.query.orderId
      this.$ajax.getBillDetail(orderId).then((res) => {
//        console.log(res)
        if (res.code === 200) {
          this.product = res.data.order_info
          this.installment = res.data.stages_info
          this.gifts = res.data.gives
          this.numInTotal = parseInt(res.data.gives ? res.data.gives.length : 0) + 1
          if (res.data.gives && res.data.gives.length !== 0) {
            this.giftsExist = true
          }
          this.status = 'complete'
        }
      })
    }
  },
  created () {
    this.getBillDetail()
  }
}
</script>

<style scoped>
.detail {
  padding: 40px;
}

.product {
  margin-top: 24px;
}

.product-header {
  height: 50px;
  padding-left: 17px;
  border: 1px solid #e0e0e0;
  background-color: #fafafa;
}

.product-header ul {
  overflow: hidden;
}

.product-header li {
  float: left;
  line-height: 50px;
}

.info {
  width: 341px;
}

.amount {
  width: 186px;
}

.number {
  width: 176px;
  margin-right: 10px;
}

.pay {
  width: 132px;
}

.product-content {
  border: 1px solid #e0e0e0;
  border-top: 0;
  padding-left: 17px;
}

.product-content ul {
  overflow: hidden;
}

.product-content li {
  float: left;
  height: 116px;
  display: table;
}

.item {
  display: table-cell;
  vertical-align: middle;
}

.img {
  width: 80px;
}

.img img {
  width: 80px;
  height: 80px;
}

.title {
  width: 261px;
}

.title p {
  width: 142px;
  line-height: 20px;
  padding-left: 8px;
}

.gray {
  color: #666;
}

.installment {
  margin-top: 60px;
}

.installment-header {
  height: 52px;
  background-color: #fafafa;
  padding-left: 54px;
}

.installment-header ul {
}

.installment-header ul:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

.installment-header li {
  float: left;
  line-height: 52px;
}

.installment-number {
  width: 202px;
}

.date {
  width: 234px;
}

.installment-pay {
  width: 203px;
}

.status {
  width: 140px;
  text-align: center;
}

.installment-status {
  width: 140px;
}

.installment-status > div > div {
  text-align: center;
}

.installment-item {
  height: 68px;
  padding-left: 54px;
  color: #666;
  border-bottom: 1px solid #e6e6e6;
}

.installment-item:last-child {
  border-bottom: none;
}

.installment-item li {
  float: left;
  height: 68px;
  line-height: 20px;
  display: table;
}

.item-table-cell {
  display: table-cell;
  vertical-align: middle;
}

.has-paid {
  color: #a5a5a5;
}

.overdue {
  color: #e74c3c;
}

.item-pay {
  float: left;
}

.item-overdue {
  float: left;
  margin-left: 7px;
}

.item-icon {
  float: left;
  line-height: 14px;
  margin-left: 6px;
  margin-top: 3px;
  position: relative;
}

.item-icon-img {
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.item-icon-img img {
  display: block;
  width: 100%;
  height: 100%;
}

.tip {
  height: 39px;
  line-height: 39px;
  border: 1px solid #e6e6e6;
  background-color: #fff;
  padding: 0 11px;
  white-space: nowrap;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 14px;
  font-size: 12px;
  color: #666;
}

.tip-angle {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid #e6e6e6;
  position: absolute;
  top: -7px;
  left: 50%;
  margin-left: -4px;
}

.tip-angle:after {
  content: '';
  width: 0;
  height: 0;
  display: block;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  top: 1px;
  left: -4px;
}

.loading {
  margin-top: 100px;
}

.width-341 {
  width: 341px;
}

.padding-left-18 {
  padding-left: 18px;
}

.width-padding-left {
  width: 149px;
  padding-left: 14px;
}
</style>
